<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script>
$(function() {
	var rollingDiv = $("#rolling");
	rollingDiv.rolling("right", 120, 90, 4); // direction, item width, item height, visible item count
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg'>");
	rollingDiv.startRolling(50, 1000, 10); // rolling time, viewing time, animation frame count
	rollingDiv.bind("mouseover", function() {
		rollingDiv.stopRolling();
	});
	rollingDiv.bind("mouseout", function() {
		rollingDiv.resumeRolling();
	});
});
</script>
<h2>JQuery Rolling</h2>
<a href="jqueryrolling.zip">download</a>
Tested jquery 1.5.2, Firefox 3.6, Chrome 11, Explorer 8
<hr>
<div id="rolling"></div>
<hr>
<xmp id='code'>
<html>
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<script>
$(function() {
	var rollingDiv = $("#rolling");
	rollingDiv.rolling("right", 120, 90, 4); // direction, item width, item height, visible item count
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg'>");
	rollingDiv.addRollingItem("<img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg'>");
	rollingDiv.startRolling(50, 1000, 10); // rolling time, viewing time, animation frame count
	rollingDiv.bind("mouseover", function() {
		rollingDiv.stopRolling();
	});
	rollingDiv.bind("mouseout", function() {
		rollingDiv.resumeRolling();
	});
});	
</script>
</head>
<body>
<div id="rolling"></div>
</body>
</html>
</xmp>
<hr>
<h3>samples</h3>
<pre>
<a href="Simple_Right_Rolling.html">Right Rolling</a>
<a href="Simple_Left_Rolling.html">Left Rolling</a>
<a href="Simple_Up_Rolling.html">Up Rolling</a>
<a href="Simple_Down_Rolling.html">Down Rolling</a>
<a href="Large_Image_Rolling.html">Large Image Rolling</a>
<a href="Html_Content_Rolling.html">Html Content Rolling</a>
<a href="Mouse_Event_Rolling1.html">Mouse Event1</a>
<a href="Mouse_Event_Rolling2.html">Mouse Event2</a>
<a href="Mouse_Event_Rolling3.html">Mouse Event3</a>
<a href="Mouse_Event_Rolling4.html">Mouse Event4</a>
<a href="Mouse_Event_Rolling5.html">Mouse Event5</a>
<a href="GeneratingRolling.html">Generating Rolling</a>
</pre>